// @mixin themable($theme-name, $container-bg, $left-bg, $right-bg, $innertext, $button-bg) {
//     .#{$theme-name} {
//         .container {
//             background-color: $container-bg;
//             border: 1px solid #000;
//             display: flex;
//             height: 500px;
//             justify-content: space-between;
//             margin: 0 auto;
//             padding: 1em;
//             width: 50%;
 
//             * {
//                 color: $innertext;
//                 font-size: 2rem;
//             }
 
//             .left {
//                 background-color: $left-bg;
//                 height: 100%;
//                 width: 69%;
//             }
 
//             .right {
//                 background-color: $right-bg;
//                 height: 100%;
//                 position: relative;
//                 width: 29%;
//             }
 
//             .button {
//                 background-color: $button-bg;
//                 border: 0;
//                 border-radius: 10px;
//                 bottom: 10px;
//                 cursor: pointer;
//                 font-size: 1rem;
//                 font-weight: bold;
//                 padding: 1em 2em;
//                 position: absolute;
//                 right: 10px;
//             }
//         }
//     }
//  }
 
@mixin themable($theme-name, $theme-map) {
    .#{$theme-name} {
        .container {
            .left, .right {
                font-size: 2rem;
            }
        }
 
        .container .right {
            position: relative
        }
 
        .button {
            border: 0;
            border-radius: 10px;
            bottom: 10px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: bold;
            padding: 1em 2em;
            position: absolute;
            right: 10px;
        }
 
        // Loop through each of the keys (sections)
        @each $section, $map in $theme-map {
            @if ($section == container) {
                .container {
                    background-color: map-get($map, bg);
                    border: 1px solid map-get($map, border-color);
                    display: flex;
                    height: 500px;
                    justify-content: space-between;
                    margin: 0 auto;
                    padding: 1em;
                    width: 50%;
                }
            } @else {
                .#{$section} {
                    background-color: map-get($map, bg);
                    color: map-get($map, color);
 
                    @if ($section != button) {
                        height: map-get($map, height);
                        width: map-get($map, width);
                     } @else {
                        &:hover {
                            background-color: lighten(map-get($map, bg), 20%);
                        }
                     }
                }
            }
        }
    }
 }